<template>
  <div v-show="warrantStatus == '暂未提交支付认证！' || warrantStatus == '驳回'">
    <div class="other">
      <p class="main_text">支付认证</p>
      <span></span>&emsp;
      <span v-if="warrantStatus == '驳回'" style="font-size: 14px; color: rgb(232 102 102)"
      >申请已驳回：{{ warrantReason }}</span
      >
    </div>
    <div class="record" style="margin-top: 16px">
      <!-- /*/*/*/*/*/*/*/*/*/*/*/*/  主体信息  /*/*/*/*/*/*/*/*/*/*/*/*/ -->
      <el-form ref="ruleFormRef" :model="uploadMes" label-position="right" label-width="150" :rules="rules">
        <!-- /*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*  公司信息  /*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/* -->

        <div class="box_1">
          <p class="mes" style="margin-top: 0">主体信息</p>

          <div class="fx">
            <div style="width: 45%">
              <el-form-item label="企业签约名" prop="signName">
                <el-input placeholder="请输入公司名" v-model="uploadMes.signName" style="width: 100%"></el-input>
              </el-form-item>
            </div>
            <div style="width: 45%">
              <el-form-item label="统一社会信用代码" prop="licenceNo">
                <el-input
                  placeholder="请输入统一社会信用代码"
                  v-model="uploadMes.licenceNo"
                  style="width: 100%"></el-input>
              </el-form-item>
            </div>
            <div style="width: 45%">
              <el-form-item label="店铺名" prop="shortName">
                <el-input
                  placeholder="店铺名和企业签约名一致"
                  v-model="uploadMes.shortName"
                  style="width: 100%"></el-input>
              </el-form-item>
            </div>
            <div style="width: 45%">
              <el-form-item label="账户类型" prop="bankAccountType">
                <el-select
                  v-model="uploadMes.bankAccountType"
                  filterable
                  remote
                  reserve-keyword
                  placeholder="请选择账户类型"
                  remote-show-suffix
                  :remote-method="remoteMethod"
                  :loading="loading"
                  style="width: 100%">
                  <el-option
                    v-for="item in card_type_options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value" />
                </el-select>
              </el-form-item>
            </div>
            <div style="width: 45%">
              <el-form-item label="开户行总行" prop="bankCode">
                <el-select-v2
                  v-model="uploadMes.bankCode"
                  filterable
                  remote
                  :remote-method="bankRemoteMethod"
                  clearable
                  :options="brankBox"
                  :loading="bankLoading"
                  placeholder="请选择开户行"
                  @change="change" />
              </el-form-item>
            </div>
            <div style="width: 45%">
              <el-form-item label="银行卡号" prop="bankCardNo">
                <el-input placeholder="请输入银行卡号" v-model="uploadMes.bankCardNo"></el-input>
              </el-form-item>
            </div>
            <div style="width: 45%">
              <el-form-item label="结算方向" prop="settlementDirection">
                <el-select
                  v-model="uploadMes.settlementDirection"
                  filterable
                  remote
                  reserve-keyword
                  placeholder="请选择结算方向"
                  remote-show-suffix
                  :remote-method="remoteMethod"
                  :loading="loading"
                  style="width: 100%">
                  <el-option
                    v-for="item in direction_options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value" />
                </el-select>
              </el-form-item>
            </div>
            <div style="width: 45%">
              <el-form-item label="签约类型" prop="signType">
                <el-select v-model="uploadMes.signType" class="m-2" placeholder="请选择签约类型" style="width: 100%">
                  <el-option v-for="item in type_options" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <div style="width: 45%">
              <el-form-item label="经营地址" prop="businessAddressInfo">
                <el-cascader
                  v-model="uploadMes.businessAddressInfo"
                  :options="addressBox"
                  @change="addressChange"
                  style="width: 100%" />
              </el-form-item>
            </div>
            <div style="width: 45%">
              <el-form-item label="详细地址" prop="address">
                <el-input
                  placeholder="请输入详细地址"
                  v-model="uploadMes.address"
                  type="textarea"
                  row="8"
                  maxlength="50"
                  show-word-limit></el-input>
              </el-form-item>
            </div>
            <div style="width: 100%">
              <el-form-item label="营业执照" prop="licenceUrl">
                <el-upload
                  action="#"
                  list-type="picture-card"
                  :auto-upload="false"
                  v-model:file-list="LicenceFile"
                  :on-change="LicenceUP"
                  :limit="1">
                  <el-icon class="up_img">
                    <Picture />
                  </el-icon>
                  <template #file="{file}">
                    <div>
                      <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                      <span class="el-upload-list__item-actions" style="">
                        <span
                          class="el-upload-list__item-preview"
                          @click="handlePictureCardPreview(file)"
                          style="position: absolute; left: 30px; top: 48%">
                          <el-icon><zoom-in /></el-icon>
                        </span>
                        <div style="width: 40px; height: 40px"></div>
                        <span class="el-upload-list__item-delete" style="position: absolute; right: 40px; top: 48%">
                          <el-icon @click="DelLicence">
                            <Delete />
                          </el-icon>
                        </span>
                      </span>
                    </div>
                  </template>
                </el-upload>
                <el-dialog v-model="dialogVisible">
                  <img w-full :src="dialogImageUrl" alt="Preview Image" style="width: 100%; height: 100%" />
                </el-dialog>
              </el-form-item>
            </div>
            <div style="width: 100%">
              <el-form-item label="开户许可证" prop="openAccountLicenceUrl">
                <el-upload
                  action="#"
                  list-type="picture-card"
                  :auto-upload="false"
                  v-model:file-list="openAccountLicence"
                  :on-change="openAccountLicenceChange"
                  :limit="1">
                  <el-icon class="up_img">
                    <Picture />
                  </el-icon>
                  <template #file="{file}">
                    <div>
                      <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                      <span class="el-upload-list__item-actions" style="">
                        <span
                          class="el-upload-list__item-preview"
                          @click="handlePictureCardPreview(file)"
                          style="position: absolute; left: 30px; top: 48%">
                          <el-icon><zoom-in /></el-icon>
                        </span>
                        <div style="width: 40px; height: 40px"></div>
                        <span class="el-upload-list__item-delete" style="position: absolute; right: 40px; top: 48%">
                          <el-icon @click="DelopenAccountLicenceChange">
                            <Delete />
                          </el-icon>
                        </span>
                      </span>
                    </div>
                  </template>
                </el-upload>
                <el-dialog v-model="dialogVisible">
                  <img w-full :src="dialogImageUrl" alt="Preview Image" style="width: 100%; height: 100%" />
                </el-dialog>
              </el-form-item>
            </div>
          </div>
        </div>
        <!-- /*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*  法人信息  /*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/* -->

        <div class="box_1">
          <p class="mes">法人信息</p>
          <div class="ph">
            <div style="width: 120px; display: flex; justify-content: center; flex-wrap: wrap">
              <span class="text_mes" style="width: 100%; text-align: center">正面照</span
              ><el-upload
              action="#"
              list-type="picture-card"
              :auto-upload="false"
              v-model:file-list="idCard"
              :on-change="idCardFile"
              :limit="1">
              <el-icon class="up_img">
                <Picture />
              </el-icon>
              <template #file="{file}">
                <div>
                  <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                  <span class="el-upload-list__item-actions" style="">
                      <span
                        class="el-upload-list__item-preview"
                        @click="handlePictureCardPreview(file)"
                        style="position: absolute; left: 30px; top: 48%">
                        <el-icon><zoom-in /></el-icon>
                      </span>
                      <div style="width: 40px; height: 40px"></div>
                      <span class="el-upload-list__item-delete" style="position: absolute; right: 40px; top: 48%">
                        <el-icon @click="DelidCard">
                          <Delete />
                        </el-icon>
                      </span>
                    </span>
                </div>
              </template>
            </el-upload>
              <el-dialog v-model="dialogVisible">
                <img w-full :src="dialogImageUrl" alt="Preview Image" style="width: 100%; height: 100%" />
              </el-dialog>
            </div>
            &emsp;&emsp;
            <div style="width: 120px; display: flex; justify-content: center; flex-wrap: wrap">
              <span class="text_mes" style="width: 100%; text-align: center">国徽照</span
              ><el-upload
              action="#"
              list-type="picture-card"
              :auto-upload="false"
              v-model:file-list="idCard1"
              :on-change="idCard1File"
              :limit="1">
              <el-icon class="up_img">
                <Picture />
              </el-icon>
              <template #file="{file}">
                <div>
                  <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                  <span class="el-upload-list__item-actions" style="">
                      <span
                        class="el-upload-list__item-preview"
                        @click="handlePictureCardPreview(file)"
                        style="position: absolute; left: 30px; top: 48%">
                        <el-icon><zoom-in /></el-icon>
                      </span>
                      <div style="width: 40px; height: 40px"></div>
                      <span class="el-upload-list__item-delete" style="position: absolute; right: 40px; top: 48%">
                        <el-icon @click="DelidCard1">
                          <Delete />
                        </el-icon>
                      </span>
                    </span>
                </div>
              </template>
            </el-upload>
              <el-dialog v-model="dialogVisible">
                <img w-full :src="dialogImageUrl" alt="Preview Image" style="width: 100%; height: 100%" />
              </el-dialog>
            </div>

            <div style="display: flex; align-items: center">&emsp;&emsp;</div>
          </div>
          <div class="fx">
            <div style="width: 45%">
              <el-form-item label="法人姓名" prop="legalName">
                <el-input placeholder="请输入法人姓名" v-model="uploadMes.legalName"></el-input>
              </el-form-item>
            </div>
            <div style="width: 45%">
              <el-form-item label="证件号码" prop="legalLicenceNo">
                <el-input placeholder="请输入证件号码" v-model="uploadMes.legalLicenceNo"></el-input>
              </el-form-item>
            </div>
          </div>
        </div>
        <!-- /*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*  联系人信息  /*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/* -->

        <div class="box_1" style="border: 0">
          <p class="mes">联系人信息</p>
          <div class="fx">
            <div style="width: 45%">
              <el-form-item label="联系人姓名" prop="contactName">
                <el-input placeholder="请输入联系人姓名" v-model="uploadMes.contactName"></el-input>
              </el-form-item>
            </div>
            <div style="width: 45%">
              <el-form-item label="联系人手机号" prop="contactMobile">
                <el-input placeholder="请输入联系人手机号" v-model="uploadMes.contactMobile"></el-input>
              </el-form-item>
            </div>
            <div style="width: 45%">
              <el-form-item label="联系人邮箱" prop="contactEmail">
                <el-input placeholder="请输入联系人邮箱" v-model="uploadMes.contactEmail"></el-input>
              </el-form-item>
            </div>
            <div style="width: 45%">
              <el-form-item label="联系人证件号码" prop="contactLicenceNo">
                <el-input placeholder="请输入联系人证件号码" v-model="uploadMes.contactLicenceNo"></el-input>
              </el-form-item>
            </div>
            <div style="width: 45%">
              <el-form-item label="管理员邮箱" prop="adminEmail">
                <el-input placeholder="请输入管理员邮箱" v-model="uploadMes.adminEmail"></el-input>
              </el-form-item>
            </div>
            <div style="width: 45%">
              <el-form-item label="管理员手机号" prop="adminMobile">
                <el-input placeholder="请输入管理员手机号" v-model="uploadMes.adminMobile"></el-input>
              </el-form-item>
            </div>
            <div style="width: 45%">
              <el-form-item label="客服电话" prop="servicePhone">
                <el-input placeholder="请输入客服电话" v-model="uploadMes.servicePhone"></el-input>
              </el-form-item>
            </div>
          </div>
        </div>
      </el-form>

      <div class="btn_sub">
        <el-button class="solid" @click="uploadSure(ruleFormRef)">提交审核</el-button>
      </div>
    </div>
    <div style="height: 30px"></div>
  </div>
  <!-- 待签约 -->
  <div class="status_page" v-show="warrantStatus == '待签署'">
    <div class="other">
      <p class="main_text">支付认证</p>
    </div>
    <div class="center">
      <img
        class="photo"
        src="http://cyrimageoss.oss-cn-chengdu.aliyuncs.com/%E5%B9%B3%E5%8F%B0%E7%85%A7%E7%89%87%E7%B3%BB%E7%BB%9F%E7%85%A7%E7%89%87/iorwsagency.png?Expires=2042418370&OSSAccessKeyId=LTAI5t7N22kEA61Ug9pLmEMw&Signature=my%2BTaeH4UP7%2FmiTj4wqNft3Zd98%3D"
        alt="" />
      <p class="title" style="margin-top: 50px">请完成认证签约</p>
      <p class="title content">为保障账户安全，请您完成认证签约，避免影响支付功能</p>
      <button class="btn" @click="goSign">认证签约</button>
    </div>
  </div>
  <!-- 已认证 -->
  <div class="status_page" v-show="warrantStatus == '完成'">
    <div class="other">
      <p class="main_text">支付认证</p>
    </div>
    <div class="center">
      <img
        class="photo"
        src="http://cyrimageoss.oss-cn-chengdu.aliyuncs.com/%E5%B9%B3%E5%8F%B0%E7%85%A7%E7%89%87%E7%B3%BB%E7%BB%9F%E7%85%A7%E7%89%87/ecrmtfinish.png?Expires=2042422989&OSSAccessKeyId=LTAI5t7N22kEA61Ug9pLmEMw&Signature=ZI5sYc0ovQbPd1DJWTaIIJrKrE0%3D"
        alt="" />
      <p class="title" style="margin-top: 50px">您已完成认证签约</p>
      <p class="title content">您已完成认证签约，可以正常使用支付功能</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref, onMounted, reactive} from 'vue';
import {Picture, Delete, ZoomIn} from '@element-plus/icons-vue';
import {
  Licence,
  RequestPayAccountUploadQual,
  idCardRecognition,
  RequestRegisterMerchant,
  RequestBankCode,
  RequestAuthStatusAndSignUrl,
} from '@/api/path/index.js';
import type {FormInstance, UploadProps} from 'element-plus';
import {regionData, codeToText} from 'element-china-area-data';
const shopId = JSON.parse(localStorage.getItem('roleInfo')!).shopId;
const ruleFormRef = ref<FormInstance>();
const warrantStatus = ref('协议待签署'); //当前支付认证状态
const warrantReason = ref('');
const addressBox = ref<any>([]); //地址
const warrantUrl = ref('');
const brankBox = ref<any>([]); //银行卡
const change = () => {
  console.log('zzzzzzzzzzzzzzz', uploadMes.value);
};
onMounted(async () => {
  const statusRequest = await RequestAuthStatusAndSignUrl(shopId);
  console.log('获取店铺的认证状态', statusRequest);
  if (statusRequest.msg == '暂未提交支付认证！') {
    warrantStatus.value = '暂未提交支付认证！';
  } else if (statusRequest.msg == '操作成功！') {
    if (statusRequest.resultObj == '您已完成支付认证！') {
      warrantStatus.value = '完成';
    } else if (statusRequest.resultObj.applicationStatus == 'AGREEMENT_SIGNING') {
      warrantStatus.value = '待签署';
      warrantUrl.value = statusRequest.resultObj.agreementSignUrl;
    } else if (statusRequest.resultObj.applicationStatus == 'REVIEW_BACK') {
      warrantStatus.value = '驳回';
      warrantReason.value = statusRequest.resultObj.auditOpinion;
    }
  }
  // 获取地址
  addressBox.value = regionData;
});
let bankTimer = ref();
const bankLoading = ref(false);
const bankRemoteMethod = (query: string) => {
  if (query !== '') {
    loading.value = true;
    clearTimeout(bankTimer.value);
    bankTimer.value = setTimeout(async () => {
      bankLoading.value = false;
      // 获取银行卡
      const brankList = await RequestBankCode({keyword: query});
      brankBox.value = brankList.resultObj.codes.map((item: any) => {
        return {value: item.code, label: item.name};
      });
      console.log('搜索列表', brankBox.value);
    }, 500);
  } else {
    brankBox.value = [];
  }
};
// 表单规则
const rules = reactive({
  signName: [{required: true, message: '请输入公司名字', trigger: 'blur'}],
  // unit: [{ required: true, message: '请选择商品单位', trigger: 'change' }],
  licenceNo: [
    {required: true, message: '请输入社会信用编码', trigger: 'change'},
    {
      pattern: /^[A-Za-z0-9]+$/,
      message: '请输入正确的社会信用编码（只能由字母，数字组成）',
      trigger: 'blur',
    },
  ],
  settlementDirection: [{required: true, message: '请选择结算方向', trigger: 'blur'}],

  shortName: [{required: true, message: '请输入店铺名', trigger: 'blur'}],

  signType: [{required: true, message: '请选择签约类型', trigger: 'change'}],
  bankAccountType: [{required: true, message: '请选择账户类型', trigger: 'change'}],
  bankCode: [{required: true, message: '请选择开户行', trigger: 'change'}],
  bankCardNo: [{required: true, message: '请输入银行卡号', trigger: 'blur'}],

  legalName: [{required: true, message: '请输入法人姓名', trigger: 'blur'}],
  legalLicenceNo: [
    {required: true, message: '请输入法人身份证', trigger: 'blur'},
    {
      pattern: /^[A-Za-z0-9]+$/,
      message: '请输入身份证',
      trigger: 'blur',
    },
  ],

  contactName: [{required: true, message: '请输入联系人姓名', trigger: 'blur'}],
  contactMobile: [
    {required: true, message: '请输入联系人电话', trigger: 'blur'},
    {
      pattern: /^1[3|4|5|6|7|8|9]\d{9}$/,
      message: '请输入正确手机号',
      trigger: 'blur',
    },
  ],
  contactEmail: [
    {required: true, message: '请输入联系人邮箱', trigger: 'blur'},
    {
      pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
      message: '请输入正确邮箱',
      trigger: 'blur',
    },
  ],
  contactLicenceNo: [
    {required: true, message: '请输入联系人证件号', trigger: 'blur'},
    {
      pattern: /^[A-Za-z0-9]+$/,
      message: '请输入正确证件号',
      trigger: 'blur',
    },
  ],
  servicePhone: [
    {required: true, message: '请输入客服电话', trigger: 'blur'},
    {
      pattern: /^\d+$/,
      message: '电话只能由数字组成！',
      trigger: 'blur',
    },
  ],
  adminEmail: [
    {required: true, message: '管理员邮箱', trigger: 'blur'},
    {
      pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
      message: '请输入正确邮箱',
      trigger: 'blur',
    },
  ],
  adminMobile: [
    {required: true, message: '请输入管理员手机号', trigger: 'blur'},
    {
      pattern: /^1[3|4|5|6|7|8|9]\d{9}$/,
      message: '请输入正确手机号',
      trigger: 'blur',
    },
  ],

  businessAddressInfo: [{required: true, message: '请选择地区', trigger: 'change'}],
  address: [{required: true, message: '请输入详细地址', trigger: 'blur'}],
});

const LicenceFile = ref([]); //营业执照
const idCard = ref([]); //法人证件照
const idCard1 = ref([]); //法人证件照
const openAccountLicence = ref([]); //开户许可证
/**
 * 支付入网数据
 */
const uploadMes = ref({
  licenceUrl: '', //营业执照地址
  signName: '', //商户签约名
  licenceNo: '', //统一社会信用编码
  shortName: '', //店铺名
  signType: '', //签约类型
  openAccountLicenceUrl: '', //开户许可证

  legalName: '', //法人名称
  legalLicenceNo: '', //法人证件编号
  legalLicenceFrontUrl: '', //法人证件人像面照片地址
  legalLicenceBackUrl: '', //法人证件非人像面照片地址

  contactName: '', //联系人姓名
  contactMobile: '', //联系人手机号
  contactEmail: '', //联系人邮箱
  contactLicenceNo: '', //联系人证件号码
  servicePhone: '', //客服电话
  adminEmail: '', //商户后台管理员邮箱
  adminMobile: '', //商户后台管理员手机号

  bankCode: '', //开户行
  bankCardNo: '', //银行卡号
  bankAccountType: '', //账户类型
  settlementDirection: 'BANKCARD', //结算方向

  businessAddressInfo: '', //经营地址
  province: '', //省
  city: '', //市
  district: '', //区
  address: '',
});
/**
 * 银行卡，身份证图片验证
 */
const photoVerify = (rawFile: any) => {
  return new Promise((resolve, reject) => {
    if (
      rawFile.type === 'image/jpeg' ||
      rawFile.type === 'image/jpg' ||
      rawFile.type === 'image/bmp' ||
      rawFile.type === 'image/png' ||
      rawFile.type === 'image/gif' ||
      rawFile.type === 'image/tiff'
    ) {
      if (rawFile.size / 1024 / 1024 > 5) {
        ElMessage.error('该图片大小不能超过5M');
        reject();
      } else {
        resolve('验证通过');
      }
    } else {
      ElMessage.error('该图片仅支持JPG，JPEG，BMP，PNG，GIF，TIFF');
      reject();
    }
  });
};
/**
 * 营业执照图片验证
 */
const photoVerify1 = (rawFile: any) => {
  return new Promise((resolve, reject) => {
    if (
      rawFile.type === 'image/jpeg' ||
      rawFile.type === 'image/jpg' ||
      rawFile.type === 'image/bmp' ||
      rawFile.type === 'image/png' ||
      rawFile.type === 'image/gif' ||
      rawFile.type === 'image/tiff'
    ) {
      if (rawFile.size / 1024 / 1024 > 4) {
        ElMessage.error('该图片大小不能超过5M');
        reject();
      } else {
        resolve('验证通过');
      }
    } else {
      ElMessage.error('该图片仅支持JPG，JPEG，BMP，PNG，GIF，TIFF');
      reject();
    }
  });
};
const ceshi = () => {};
/**
 * 上传营业执照
 */
const LicenceUP = async (file: any) => {
  try {
    const verify = await photoVerify1(file.raw);
    if (verify == '验证通过') {
      const LicenceFom = new FormData();
      LicenceFom.append('file', file.raw);
      const mylist = LicenceFom.get('file');
      console.log('营业执照上传成功1111111,', mylist);
      const LicenceGet = await RequestPayAccountUploadQual(LicenceFom);
      uploadMes.value.licenceUrl = LicenceGet.resultObj;
      console.log('营业执照上传成功');
      const formimgs = new FormData();
      formimgs.append('Licence', file.raw);
      const a = await Licence(formimgs);
      console.log('营业执照识别成功', a);
      if (a.msg == '操作成功！') {
        if (JSON.parse(a.resultObj).words_result) {
          uploadMes.value.signName = JSON.parse(a.resultObj).words_result.单位名称.words;
          uploadMes.value.licenceNo = JSON.parse(a.resultObj).words_result.社会信用代码.words;
        }
      } else {
        ElMessage.error('识别失败，请重新上传营业执照！');
      }
    }
  } catch {
    console.log('1212121211111111111111111111111');
    DelLicence();
  }
};
/**
 * 删除营业执照
 */
const DelLicence = () => {
  LicenceFile.value = [];
  uploadMes.value.licenceUrl = '';
};
/**
 * 上传开户许可证
 */
const openAccountLicenceChange = async (file: any) => {
  try {
    const verify = await photoVerify(file.raw);
    if (verify == '验证通过') {
      const openAccountLicence = new FormData();
      openAccountLicence.append('file', file.raw);
      const openAccountLicenceGet = await RequestPayAccountUploadQual(openAccountLicence);
      uploadMes.value.openAccountLicenceUrl = openAccountLicenceGet.resultObj;
      console.log('营业执照上传成功', uploadMes.value.openAccountLicenceUrl);
    }
  } catch {
    DelopenAccountLicenceChange();
  }
};
/**
 * 删除开户许可证
 */
const DelopenAccountLicenceChange = () => {
  openAccountLicence.value = [];
  uploadMes.value.openAccountLicenceUrl = '';
};
/**
 * 上传身份证正面
 */
const idCardFile = async (file: any) => {
  try {
    const verify = await photoVerify(file.raw);
    if (verify == '验证通过') {
      // 正面身份证地址
      const idCardFom = new FormData();
      idCardFom.append('file', file.raw);
      const mylist = idCardFom.get('file');
      console.log('营业执照上传成功1111111,', mylist);
      console.log('身份证上传成功11111111111,', file.raw);
      const idCardGet = await RequestPayAccountUploadQual(idCardFom);
      uploadMes.value.legalLicenceFrontUrl = idCardGet.resultObj;
      console.log('身份证上传成功');

      const formimgs = new FormData();
      formimgs.append('idCard', file.raw);
      const a = await idCardRecognition(formimgs);
      console.log('身份证识别', JSON.parse(a.resultObj));

      if (a.msg == '操作成功！') {
        uploadMes.value.legalName = JSON.parse(a.resultObj).words_result.姓名.words;
        uploadMes.value.legalLicenceNo = JSON.parse(a.resultObj).words_result.公民身份号码.words;
        console.log('身份证识别11111', uploadMes.value);
      }
      console.log('身份证识别99999', uploadMes.value);
    }
  } catch {
    DelidCard();
  }
};
const idCard1File = async (file: any) => {
  try {
    const verify = await photoVerify(file.raw);
    if (verify == '验证通过') {
      // 背面身份证地址
      const idCard1Fom = new FormData();
      idCard1Fom.append('file', file.raw);
      const mylist = idCard1Fom.get('file');
      console.log('营业执照上传成功1111111,', mylist);
      console.log('身份证上传成功66666,', file.raw);
      const idCard1Get = await RequestPayAccountUploadQual(idCard1Fom);
      uploadMes.value.legalLicenceBackUrl = idCard1Get.resultObj;
      console.log('身份证上传成功5555');
    }
  } catch {
    DelidCard();
  }
};

/**
 * 删除身份证
 */
const DelidCard = () => {
  idCard.value = [];
  uploadMes.value.legalLicenceFrontUrl = '';
};
const DelidCard1 = () => {
  idCard1.value = [];
  uploadMes.value.legalLicenceBackUrl = '';
};
/**
 * 预览上传的图片
 */
const dialogImageUrl = ref('');
const dialogVisible = ref(false);
// 银行卡条件查询
const handlePictureCardPreview = (file: UploadFile) => {
  dialogImageUrl.value = file.url!;
  dialogVisible.value = true;
};
// 地址选择
const addressChange = (e) => {
  uploadMes.value.province = e[0];
  uploadMes.value.city = e[1];
  uploadMes.value.district = e[2];
  console.log('地址改变了', codeToText);
  for (let k in codeToText) {
    if (codeToText[k] == uploadMes.value.province) {
      const x = 6 - k.length;
      for (let i = 0; i < x; i++) {
        console.log(i);

        k = k + '0';
      }
      uploadMes.value.province = k;
    } else if (codeToText[k] == uploadMes.value.city) {
      const y = 6 - k.length;
      for (let i = 0; i < y; i++) {
        k = k + '0';
      }
      uploadMes.value.city = k;
    } else if (codeToText[k] == uploadMes.value.district) {
      const z = 6 - k.length;
      for (let i = 0; i < z; i++) {
        k = k + '0';
      }
      uploadMes.value.district = k;
    }
  }
  console.log('地址改变了9999999999999999999', uploadMes.value.province);
  console.log('地址改变了9999999999999999999', uploadMes.value.city);
  console.log('地址改变了9999999999999999999', uploadMes.value.district);
};

/**
 * 银行卡输入改变
 */
let timer1 = ref(null);
const remoteMethod = async (query: string) => {
  if (timer1 != null) {
    clearTimeout(timer1);
  }
  timer1 = setTimeout(async () => {
    console.log('搜索改变了', query);
    const brankList = await RequestBankCode({keyword: query});
    brankBox.value = brankList.resultObj.codes;
  }, 500);
};

/**
 * 签约类型
 */
const type_options = [
  {
    value: 'INDIVIDUAL',
    label: '个体工商户',
  },
  {
    value: 'ENTERPRISE',
    label: '企业',
  },
  {
    value: 'INSTITUTION',
    label: '事业单位',
  },
  {
    value: 'COMMUNITY',
    label: '社会团体',
  },
];
/**
 * 去签约
 */
const goSign = () => {
  window.open(warrantUrl.value);
};
/**
 * 银行卡类型
 */
const card_type_options = [
  {
    value: 'UNIT_SETTLEMENT_CARD',
    label: '单位结算卡',
  },
  {
    value: 'ENTERPRISE_ACCOUNT',
    label: '对公账户',
  },
  {
    value: 'DEBIT_CARD',
    label: '借记卡',
  },
  {
    value: 'PASSBOOK',
    label: '存折',
  },
];
/**
 * 结算方向
 */
const direction_options = [
  {
    value: 'ACCOUNT',
    label: '结算到支付账户',
  },
  {
    value: 'BANKCARD',
    label: '结算到银行账户',
  },
];
let timer = ref(null); //设置记录时间，用于防抖
const loading = ref(false); //控制遮挡层次显示
const uploadSure = async (formEl: any) => {
  if (!formEl) return;
  await formEl.validate(async (valid: any, fields: any) => {
    if (valid) {
      if (timer != null) {
        clearTimeout(timer);
      }
      timer = setTimeout(async () => {
        console.log('111111111111111111111111111111111111111111111999999999999999999999999999999999999');

        if (LicenceFile.value.length == 0) {
          ElMessage.error('请上传营业执照！');
        } else {
          if (openAccountLicence.value.length == 0) {
            ElMessage.error('请上传营业执照！');
          } else {
            if (idCard.value.length == 0 || idCard1.value.length == 0) {
              ElMessage.error('请上传身份证！');
            } else {
              // 营业执照地址
              loading.value = true;
              const a = await RequestRegisterMerchant({
                shopId: shopId,
                registerInfo: {
                  merchantSubjectInfo: {
                    licenceUrl: uploadMes.value.licenceUrl, //营业执照地址
                    signName: uploadMes.value.signName, //商户签约名
                    licenceNo: uploadMes.value.licenceNo, //统一社会信用编码
                    shortName: uploadMes.value.shortName, //店铺名
                    signType: uploadMes.value.signType, //店铺名
                    openAccountLicenceUrl: uploadMes.value.openAccountLicenceUrl, //开户许可证照片地址
                  },
                  merchantCorporationInfo: {
                    legalName: uploadMes.value.legalName, //法人名称
                    legalLicenceNo: uploadMes.value.legalLicenceNo, //法人证件编号
                    legalLicenceFrontUrl: uploadMes.value.legalLicenceFrontUrl, //法人证件人像面照片地址
                    legalLicenceBackUrl: uploadMes.value.legalLicenceBackUrl, //法人证件非人像面照片地址
                  },
                  merchantContactInfo: {
                    contactName: uploadMes.value.contactName, //联系人姓名
                    contactMobile: uploadMes.value.contactMobile, //联系人手机号
                    contactEmail: uploadMes.value.contactEmail, //联系人邮箱
                    contactLicenceNo: uploadMes.value.contactLicenceNo, //联系人证件号码
                    servicePhone: uploadMes.value.servicePhone, //客服电话
                    adminEmail: uploadMes.value.adminEmail, //商户后台管理员邮箱
                    adminMobile: uploadMes.value.adminMobile, //商户后台管理员手机号
                  },
                  settlementAccountInfo: {
                    bankCode: uploadMes.value.bankCode, //开户行
                    bankCardNo: uploadMes.value.bankCardNo, //银行卡号
                    bankAccountType: uploadMes.value.bankAccountType, //账户类型
                    settlementDirection: uploadMes.value.settlementDirection, //结算方向
                  },
                  businessAddressInfo: {
                    province: uploadMes.value.province, //经营地址
                    city: uploadMes.value.city, //经营地址
                    district: uploadMes.value.district, //经营地址
                    address: uploadMes.value.address, //经营地址
                  },
                },
              });
              if (a.msg == '操作成功！') {
                loading.value = false;
                if (a.resultObj.result.returnCode == 'NIG00000') {
                  ElMessage.success(a.resultObj.result.returnMsg);
                  // 提交成功，清除信息
                  setTimeout(() => {
                    uploadMes.value = {
                      licenceUrl: '', //营业执照地址
                      signName: '', //商户签约名
                      licenceNo: '', //统一社会信用编码
                      shortName: '', //店铺名
                      businessAddressInfo: '', //经营地址
                      signType: '', //经营地址
                      openAccountLicenceUrl: '', //经营地址

                      legalName: '', //法人名称
                      legalLicenceNo: '', //法人证件编号
                      legalLicenceFrontUrl: '', //法人证件人像面照片地址
                      legalLicenceBackUrl: '', //法人证件非人像面照片地址

                      contactName: '', //联系人姓名
                      contactMobile: '', //联系人手机号
                      contactEmail: '', //联系人邮箱
                      contactLicenceNo: '', //联系人证件号码
                      servicePhone: '', //客服电话
                      adminEmail: '', //商户后台管理员邮箱
                      adminMobile: '', //商户后台管理员手机号

                      bankCode: '', //开户行
                      bankCardNo: '', //银行卡号
                      bankAccountType: '', //银行卡号
                      settlementDirection: 'BANKCARD', //银行卡号

                      province: '', //省
                      city: '', //市
                      district: '', //区
                      address: '', //区
                    };
                    LicenceFile.value = [];
                    idCard.value = [];
                    idCard1.value = [];
                  }, 1000);
                } else {
                  ElMessage.error(a.resultObj.result.returnMsg);
                }
              } else {
                loading.value = false;
                ElMessage.error('提交失败，请重试！');
              }
            }
          }
        }
      }, 500);
    }
  });
};
</script>

<style lang="scss" scoped>
.record {
  width: 100%;
  padding: 15px 0;
  background: #fff;
  position: relative;

  .center {
    width: 97%;
    margin: 0 auto;

    .re {
      margin-bottom: 15px;
      font-weight: 500;
    }
  }

  .box_1 {
    width: 97%;
    border-bottom: 1px solid #e5e5e5;
    margin: 0 auto;

    .box_t {
      margin-bottom: 15px;
    }

    .mes {
      font-size: 16px;
      color: #1d2129;
      margin-bottom: 15px;
      margin-top: 15px;
      font-weight: 500;
    }

    .up_img {
      color: #9fceff;
    }

    .ph {
      margin-left: 90px;
      display: flex;
    }

    .fx {
      width: 80%;
      margin-left: 30px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 10px;
      flex-wrap: wrap;
      margin-top: 20px;
    }

    .mes_title {
      font-size: 14px;
      color: #333333;
      font-weight: 500;
    }

    .text_mes {
      font-size: 14px;
      color: #606266;
      margin: 5px 0;
      display: inline-block;
    }
  }

  .btn_sub {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 40px 0;
  }
}

.status_page {
  height: 100%;

  .center {
    height: calc(100% - 50px);
    display: flex;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;

    .photo {
      width: 360px;
      height: 360px;
    }

    .title {
      width: 100%;
      text-align: center;
      font-size: 18px;
      color: #3d3d3d;
      font-weight: bold;
    }

    .content {
      font-size: 16px;
      color: #b2b2b2;
      line-height: 24px;
      font-weight: normal;
      margin-top: 8px;
    }

    .btn {
      width: 200px;
      height: 48px;
      background: #116cf8;
      border-radius: 4px;
      font-size: 16px;
      color: #ffffff;
      line-height: 48px;
      border: 0;
      margin-top: 32px;
    }
  }
}

::v-deep .el-upload--picture-card {
  background: #ecf5ff !important;
  border: 0 !important;
}

::v-deep .el-upload-list--picture-card {
  width: 120px !important;
  height: 120px !important;
  overflow: hidden !important;
}
</style>
